<template>
  <div>
    <CustomDialog
      title="选择推荐项目"
      width="900px"
      :append-to-body="true"
      :destroy-on-close="true"
      :visible.sync="isShowDialog"
    >
      <!-- 列表 -->
      <div v-if="isShowDialog" class="h-full flex flex-col justify-between">
        <el-table
          ref="table"
          v-loading="loading"
          class="flex-1"
          row-key="id"
          height="1"
          show-overflow-tooltip
          :data="dataList"
        >
          <el-table-column min-width="300px" prop="name" label="项目名称">
            <template #default="{ row }">
              <div class="flex items-center space-x-4">
                <span>{{ row.data.name }}</span>
                <el-tag v-if="row.data.invalid" size="mini" type="danger">已失效</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column min-width="100px" prop="data.statusLabel" label="项目状态">
          </el-table-column>

          <el-table-column
            min-width="100px"
            prop="data.typeLabel"
            label="项目类型"
          ></el-table-column>

          <el-table-column min-width="100px" prop="data.investment" label="拟投资额">
            <template #default="{ row }">
              <span>{{ row.data.investment }}亿元</span>
            </template>
          </el-table-column>

          <el-table-column min-width="100px" label="是否推荐">
            <template #default="{ row }">
              <el-checkbox
                :checked="localIds.includes(row._id)"
                @change="(checked) => handleChecked(checked, row)"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div
          class="
            flex-none
            border-t border-solid border-gray-200
            h-[50px]
            flex
            items-center
            justify-end
          "
        >
          <div>
            <el-pagination
              layout="total, prev, pager, next, jumper"
              :current-page.sync="pagination.pageNum"
              :total="total"
              :page-size.sync="pagination.pageSize"
              @current-change="fetchData()"
              @size-change="fetchData()"
            ></el-pagination>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="rounded-content-wrap" @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" class="rounded-content-wrap" @click="handleOk">确 定</el-button>
      </span>
    </CustomDialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import selectMixin from '../common/selectMixin'
import CustomDialog from '@/components/admin/manage/carrier/common/CustomDialog/index.vue'
export default Vue.extend({
  components: { CustomDialog },
  mixins: [
    selectMixin({
      templateName: 'B_CONSOLE_PROJECT',
    }),
  ],
})
</script>
<style lang="scss" scoped>
::v-deep .ant-transfer {
  height: 100%;
  display: flex;
  align-items: center;
}

::v-deep .ant-transfer-list {
  flex: 1;
  height: 100%;
}

::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(50, 50, 50, 0.25);
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-track {
    background-color: rgba(50, 50, 50, 0.05);
  }
}
</style>
